<template>
  <div id="container">
    <Header />
    <SiderBar />
    <div>
      <div class="layout-right_top">
        <div>基础设置</div>
      </div>
      <div class="layout-right-content">
        <!-- 左侧边栏 -->
        <div class="content1">
          <div>
            <span>*旅行社店名:</span>
            <input
              @change="duplication_name"
              v-model="formationdata.travel_agency_name"
              type="text"
            />
          </div>
          <!-- 店招图片 -->
          <div>
            <span class="shop">*店招:</span>
            <div>
              <div class="upload">
                <img :src="formationdata.travel_agency_pic" alt="" />
                <i></i>
                <input type="file" @change="upload" accept="image/*" />
              </div>
            </div>
          </div>
          <!-- <div>
            <span>*旅行社地址:</span>
            <input type="text" />
          </div> -->
          <div class="address">
            <span>*旅行社地址：</span>
            <!-- 操作层 -->
            <div class="lxs-selectt-box">
              <el-select
                class="none"
                v-model="formationdata.province"
                @change="change(formationdata.province)"
                placeholder="省"
              >
                <el-option
                  v-for="item in province1"
                  :key="item.cri_code"
                  :label="item.cri_name"
                  :value="item.cri_name + '|' + item.cri_code"
                >
                </el-option>
              </el-select>
              <el-select
                class="none"
                v-model="formationdata.city"
                @change="change(formationdata.city)"
                placeholder="市"
                no-data-text="请选择省"
              >
                <el-option
                  v-for="item in city1"
                  :key="item.cri_code"
                  :label="item.cri_name"
                  :value="item.cri_name + '|' + item.cri_code"
                >
                </el-option>
              </el-select>
              <el-select
                class="none"
                no-data-text="请选择市"
                v-model="formationdata.area"
                placeholder="区/县"
              >
                <el-option
                  v-for="item in areas"
                  :key="item.cri_code"
                  :label="item.cri_name"
                  :value="item.cri_name"
                >
                </el-option>
              </el-select>
            </div>
          </div>

          <!-- 详细地址 -->
          <div>
            <span></span>
            <textarea
              v-model="formationdata.address"
              class="synopsis"
              cols="20"
              rows="10"
            >
            </textarea>
          </div>
          <div>
            <span class="synopsis_text">*旅行社简介:</span>
            <textarea
              v-model="formationdata.travel_agency_intro"
              class="synopsis"
              cols="30"
              rows="10"
            ></textarea>
          </div>

          <!-- 运营中心选择开始 -->
          <div>
            <span>*运营中心选择:</span>
            <el-select
              v-model="cityCode"
              @change="getcode(cityCode)"
              placeholder="省"
            >
              <el-option
                v-for="item in province1"
                :key="item.cri_code"
                :label="item.cri_name"
                :value="item.cri_code"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 省级 -->
          <div>
            <span></span>
            <el-select
              v-model="areaCode"
              @change="getservice(areaCode)"
              placeholder="市"
              no-data-text="请先选择省"
            >
              <el-option
                v-for="item in city1"
                :key="item.cri_code"
                :label="item.cri_name"
                :value="item.cri_code"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 市级 -->
          <div>
            <span></span>
            <el-select
              v-model="formationdata.center_name"
              :disabled="isareashow"
              placeholder="选择运营中心"
              no-data-text="该市运营中心还未开通"
              @change="areachange($event)"
            >
              <el-option
                v-for="item in centre"
                :key="item.center_id"
                :label="item.center_name"
                :value="item.center_id"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 区运营中心 -->
          <div><span @click="submit">提交</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/HeaderTemplate";
import SiderBar from "@/components/SiderBar.vue";
import { post } from "@/service/request.js";
import gettravel from "@/mixins/gettravel.js";
import { beforeAvatarUpload, provinceChange } from "@/utils/method.js";

export default {
  components: { SiderBar, Header },
  mixins: [gettravel],
  beforeCreate() {
    provinceChange("000000").then((res) => {
      this.province1 = res.data.data;
    });
  },
  data() {
    return {
      isareashow: true,
      province1: [], // 省级内容器
      city1: [], // 市级内容器
      areas: [], // 区级容器
      centre: [], // 运营内容器
      cityvalue: "",
      cityCode: "", // 运营中心
      areaCode: "",
      formationdata: {
        travel_agency_name: "", //旅行社店名
        travel_agency_pic: "", // 店招
        province: "", // 省
        city: "", // 市
        area: "", // 区
        address: "", //旅行社地址
        travel_agency_intro: "", // 旅行社简介
        center_id: "", //	服务中心id
      },
    };
  },
  created() {
    post("center_region/api/travel_agency/gettravelagencyinfo")
      .then((res) => {
        this.formationdata = res.data.data;
        // console.log(this.formationdata);
        this.cityCode = this.formationdata.province;
        this.areaCode = this.formationdata.city;
      })
      .catch((error) => {
        console.log(error);
        this.$message.error(error.data.msg);
      });
  },
  methods: {
    // 传入input 事件对象
    upload(fileEVent) {
      // 获取浏览图片和视频
      beforeAvatarUpload(fileEVent).then((res) => {
        // console.log(res[0], fileEVent);
        this.formationdata.travel_agency_pic = res[0];
      });
    },
    // 省和市的 数据
    change(e) {
      if (e == this.formationdata.province) {
        let code = this.formationdata.province.split("|");

        this.formationdata.province = code[0];
        provinceChange(code[1]).then((res) => {
          this.city1 = res.data.data;
        });
      } else if (e == this.formationdata.city) {
        let code = this.formationdata.city.split("|");

        this.formationdata.city = code[0];
        provinceChange(code[1]).then((res) => {
          this.areas = res.data.data;
        });
      }
    },
    // 运营中心数据展示和请求数据对应
    areachange(e) {
      console.log(e);

      this.formationdata.center_id = e;
    },
    // 提交
    submit() {
      this.getTravielInfor();
    },
  },
};
</script>

<style lang='less'>
.layout-right_top {
  padding: 0 1vw;
  & > div {
    height: 40px;
    line-height: 40px;
    text-align: left;
    border-bottom: 1px solid #ccc;
  }
}
.layout-right-content {
  width: 91vw;
  height: 100%;
  display: flex;
  & .content1 {
    width: 30%;
    overflow: hidden;
    padding-right: 2vw;
    text-align: right;
    & > div:nth-child(6),
    & > div:nth-child(4),
    & > div:nth-child(2) {
      margin-top: -0.8vh;
    }

    .none {
      border: none;
    }
    // 旅行社地址
    .address {
      position: relative;
      margin-top: -2vh;
      & > span {
        position: absolute;
        top: 1.6vh;
        right: 14.4vw;
      }
    }

    > div {
      padding-bottom: 0.6vh;
      &:first-child {
        margin-top: 3vh;
        position: relative;
        & > span:nth-child(2) {
          cursor: pointer;
          position: absolute;
          color: #999;
          right: 1vh;
          top: 0;
          line-height: 4.8vh;
        }
      }

      & > *:last-child {
        // 右侧元素
        display: inline-block;
        padding: 1vh;
        border-radius: 4px;
        width: 14vw;
      }

      // 旅行社select
      .lxs-selectt-box {
        display: flex;
        position: relative;
        left: 11.8vw;
        .el-select {
          input {
            height: 38px;
            width: 4.84vw;
          }
          .el-input__suffix {
            right: 0px;
            top: 6px;
          }
          .el-input__inner {
            padding: 0 10px;
          }
          margin-right: 0.2vw;
          .el-input .el-select__caret {
            display: none;
          }
        }
      }
      .el-select:not(.none) {
        .el-input {
          position: relative;
          right: 0.6vw;
          height: 4vh;
          line-height: 4vh;
          width: 15vw;
        }
        .el-input__icon {
          line-height: 20px;
        }
      }

      // 文件上传
      div.upload {
        position: relative;
        margin-left: -1vh;
        height: 14vh;
        line-height: 14vh;
        width: 14vh;
        text-align: center;
        font-size: 40px;

        overflow: hidden;
        border: 1px dashed #07c160;
        border-radius: 4px;
        i {
          display: inline-block;
          height: 1.6vw;
          width: 1.6vw;
          background: url("../../assets/append.png") no-repeat;
          background-size: 100% 100%;
        }
        input {
          cursor: pointer;
          left: -2px;
          top: -30%;
          position: absolute;
          height: 140%;
        }
        img {
          position: absolute;
          top: 0;
          left: 50%;
          height: 100%;
          transform: translateX(-50%);
        }
      }
      // 旅社简介
      .synopsis {
        outline: none;
        border: 1px solid #d9d9d9;
        resize: none;
        height: 10vh;
      }
      .synopsis_text {
        bottom: 10vh;
        position: relative;
      }

      > *:first-child {
        display: inline-block;
        color: #999;
        &.shop {
          position: relative;
          bottom: 12vh;
        }

        margin-right: 1vw;
      }
    }
    > div:last-child {
      // 按钮
      span {
        margin-top: 0.8vh;
        position: relative;
        left: 1vw;
        cursor: pointer;
        display: inline-block;
        text-align: center;
        background-color: #07c160;
        padding: 1vh;
        border-radius: 4px;
        width: 14vw;
        color: #fff;
      }
    }
  }
}
</style>